<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  
	<title>${platformName}</title>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="<c:url value='/share/bootstrap.css'/>">
	<link rel="stylesheet" href="<c:url value='/share/AllStyle.css' />">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="<c:url value='/js/jquery.min.js' />"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="<c:url value='/js/bootstrap.min.js'/>"></script>
	<script src="<c:url value='/js/all.js'/>"></script>
	<style type="text/css">
		html,body {
			height: 100%;
			background:url("<c:url value='/share/images/backgroundImg.jpg'/>");backgroud-repeat:repeat;
		}
		.box {
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699FF', endColorstr='#6699FF'); /*  IE */
			background-image:linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image:-o-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image:-moz-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image:-webkit-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image:-ms-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			
			margin: 0 auto;
			position: relative;
			width: 100%;
			height: 100%;
		}
		.login-box {      /* 7.28 王紫葳*/ 
			width: 100%;
			max-width:500px;  
			height: 360px;
			position: absolute;
			margin-top: 300px;
			margin-left: calc(50% - 250px);
			box-shadow: 0 0 5px gray;
			padding: 0px 50px;
			background: #fff;
		}
		/*@media screen and (min-width:500px){    */ /* 7.28  已舍弃 王紫葳*/ 
			/*.login-box {*/
				/*left: 50%;*/
				/*设置负值，为要定位子盒子的一半宽度*/
				/*margin-left: -250px;*/
			/*}*/
		/*}	*/

		.form {
			width: 100%;
			max-width:500px;
			height: 250px;
			margin: 0px auto 0px auto;
			padding-top: 10px;
		}	
		
		.login-content {
			height: 260px;
			width: 100%;
			max-width:500px;
			float: left;
		}
		.home_header_right_login>a:nth-child(1) {
			background-color:#3162B2;
			color: #fff;
		}			
			
			
		.input-group {
			margin: 25px 0px 0px 0px !important;
		}
		.form-control,
		.input-group {
			height: 40px;
		}

		.form-group {
			margin-bottom: 0px !important;
		}
		.login-title {
			padding-top: 20px;
			padding-bottom: 20px;
			font-size:18px;
			cursor: pointer;
			height: 50px;
			line-height: 50px;
		}
		.login_panel{
			color: #000;
			border-bottom: 3px solid #295c96;
		}
		.phonelog_panel{
			color: #9c9c9c;
			border-bottom: 3px solid #e2e2e2;
		}

		.link p {
			line-height: 15px;
		}
		.btn-sm {
			padding: 8px 24px !important;
			font-size: 16px !important;
		}
		.login{
			width: 100%;
			background-color: #3162B2;
			font:19px "微软雅黑";
			color: #fff;
			margin-top: 15px;
			height: 42px;
		}
		.input-group-addon{
			color: #98c0ed;
			background-color: rgba(0,0,0,0);
		}
		input:-webkit-autofill {
			-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
		}
		.btn:hover, .btn:focus, .btn.focus {
		    color: #fff;
		    text-decoration: none;
		}
		.col-xs-12>span{
			font-size:12px;
			display:inline-block !important;
			margin:4px 0px;
			padding-left:5px;
		}
	</style>
</head>
<body>
	
	<!-- 登陆 注册 按钮  王紫薇7.28 -->
	<div class="home_header_right_login">
		<a href="<c:url value='/login'/>">登录</a>
		<a href="<c:url value='/login/register'/>">注册</a>
		<a href="<c:url value='/'/>">首页</a>
	</div>

	<div class="header_title">
		<div class="bookImg"></div>
		<div class="website_title">
			${platformName}
		</div>
	</div>

	

	<div class="home_header_2">
		<div class="login-box">
			<div class="login-title text-center row">
				<div class="col-xs-12 login_panel">登录</div><!--我是直接登陆-->
				<!--<div class="col-xs-6 phonelog_panel">手机动态码登陆</div>我是动态登陆 -->
			</div>

			<div class="login-content"> <!--我是直接登陆的分界线-->
				<div class="form">
					<form action="#" method="post">

						<div class="form-group">
							<div class="col-xs-12  ">
								<div class="input-group">
									<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
									<input type="text" id="username" name="name" class="form-control" placeholder="请输入手机或昵称登陆">
								</div>
								<span id="tishi1"></span>
							</div>
						</div>

						<div class="form-group">
							<div class="col-xs-12  ">
								<div class="input-group">
									<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
									<input type="password" id="password" name="password" class="form-control" placeholder="请输入密码">
								</div>
								<span id="tishi2"></span>
							</div>
							
						</div>

						<div class="form-group">
							<div class="col-xs-6 link">
								<p class="remove-margin"><small>还没账号?</small> <a href="<c:url value='/login/register'/>"><small>点击注册</small></a>
								</p>
							</div>
							<div class="col-xs-6 link">
								<a href="<c:url value='/login/forget'></c:url>"><p class="remove-margin" style="float:right;"><small>忘记密码？
								</p></a>
							</div>
						</div>

						<div class="form-group form-actions ">
							<div class="col-xs-12">
								<button type="button" id="login" class="btn btn-sm login" data-toggle="modal" >登录</button>
							</div>
							<!--  -
							<div class="modal fade bs-example-modal-lg" id="fail" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
								  <div class="modal-dialog modal-lg">
								    <div class="modal-content">
								        <div class="modal-header">
								          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
								          <h4 class="modal-title" id="myLargeModalLabel">错误</h4>
								        </div>
								        <div class="modal-body">
								          	账号或密码错误
								        </div>
								        <div class="modal-footer">
									        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									      </div>
								      </div>
								  </div>
								</div>
								<div class="modal fade bs-example-modal-lg" id="suc" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
								  <div class="modal-dialog modal-lg">
								    <div class="modal-content">
								        <div class="modal-header">
								          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
								          <h4 class="modal-title" id="myLargeModalLabel">成功</h4>
								        </div>
								        <div class="modal-body">
								          	登录成功！
								        </div>
								        <div class="modal-footer">
									        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									      </div>
								      </div>
								  </div>
								</div>
								-->
						</div>

					</form>
				</div>
			</div><!--我也是直接登陆的分界线-->


			<!--<div class="phonelog_content" style="display:none;">--><!--我是手机动态登陆的分界线-->
			<!--	hahah 
			</div>--><!--我也是手机动态登陆的分界线-->





		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			$("#login").click(function(){
				login();
			});
			$(document).keydown(function(event){ 
				if(event.keyCode == 13){ //绑定回车 
					login();
				} 
			}); 
		});
		function login(){
			if(check_form()){
				$.ajax({
					url:"<c:url value='/login/login'></c:url>",
					type:'post',
					dataType:'json',
					data:{
						"name":$("input[name='name']").val(),"password":$("input[name='password']").val()
					},
					success:function(json){
						if(json.isSuccess==true){
							//$("#suc").modal('show');
							location.href="<c:url value='/'></c:url>";
						}else{
							//$("#fail").modal('show');
							$("#tishi2").html("<font color='red'>*账号或密码错误</font>");
						}
					}
				});
			}
		}
		function check_form(){
			if($("input[name='name']").val()=='' || $("input[name='name']").val()==null){
				$("#tishi1").html("<font color='red'>请填写手机号或昵称</font>");
				return false;
			}else{
				$("#tishi1").html("");
			}
			if($("input[name='password']").val()=='' || $("input[name='password']").val()==null){
				$("#tishi2").html("<font color='red'>请填写密码</font>");
				return false;
			}else{
				$("#tishi2").html("");
			}
			return true;
		}
	</script>
</body>
</html>